<script setup lang="ts">
  import { useGetAllGoodTypeOptions } from '@/services/pages/good/useType'
  import { TreeInstance } from 'element-plus'
  import _ from 'lodash'
  import { computed, nextTick, PropType, ref, watch } from 'vue'
  import { SelectedGoodType } from '../../types'

  // 这里暂时只要二级，后续要改为一、二、三

  defineOptions({
    name: 'SelectGoodTypeForCostStandard',
  })

  const emits = defineEmits<{
    (e: 'confirm', value: Array<SelectedGoodType>): void
    (e: 'remove', value: Array<string>): void
  }>()

  const props = defineProps({
    defaultSelectedIds: {
      type: Array as PropType<Array<string>>,
      default: () => {
        return []
      },
    },
  })

  const { options, getOptionsLoading, getOptions } = useGetAllGoodTypeOptions()

  const treeInstance = ref<TreeInstance | null>(null)
  const treeProps = {
    label: 'name',
    // children: 'childData',
  }
  const visible = defineModel('visible', { type: Boolean, default: false })
  const selectedGoodTypes = ref<Array<SelectedGoodType>>([])
  const removeSelectGoodTypeIds = ref<Array<string>>([])
  const secondOptions = computed(() => {
    const result: Array<GoodTypeOptions> = []

    options.value.forEach((level1Type) => {
      level1Type.childData.forEach((level2Type) => {
        result.push(level2Type)
      })
    })

    return result
  })

  const closeDrawer = () => {
    visible.value = false
  }

  const echoGoodType = () => {
    if (props.defaultSelectedIds.length > 0) {
      treeInstance.value.setCheckedKeys(props.defaultSelectedIds, false)
    }
  }

  const onConfirm = () => {
    emits('confirm', selectedGoodTypes.value)
    closeDrawer()
    emits('remove', _.cloneDeep(removeSelectGoodTypeIds.value))
  }

  const handleSelectGoodType = (data: GoodTypeOptions, isSelected: boolean) => {
    if (isSelected) {
      if (!selectedGoodTypes.value.map((type) => type.typeId).includes(data.id)) {
        selectedGoodTypes.value.push({
          id: '',
          typeId: data.id,
          typeName: data.name,
        })
      }
      return
    }
    const removeTypeIndex = selectedGoodTypes.value.findIndex((type) => type.typeId === data.id)
    if (removeTypeIndex !== -1) {
      selectedGoodTypes.value.splice(removeTypeIndex, 1)
      removeSelectGoodTypeIds.value.push(data.id)
    }
  }

  watch(visible, async (value) => {
    await nextTick()
    if (value && treeInstance.value) {
      await getOptions()
      echoGoodType()
    }
  })
</script>

<template>
  <h-drawer
    v-model="visible"
    title="选择产品分类"
    :width="600"
    unit="px"
    :loading="getOptionsLoading"
  >
    <el-tree
      ref="treeInstance"
      :data="secondOptions"
      default-expand-all
      node-key="id"
      :props="treeProps"
      show-checkbox
      @check-change="handleSelectGoodType"
    >
    </el-tree>

    <template #footer>
      <h-button is-modal type="primary" @click="onConfirm">确定</h-button>
      <h-button is-modal @click="closeDrawer">取消</h-button>
    </template>
  </h-drawer>
</template>
